import 'package:flutter/material.dart';
import 'package:flutter_ui_demo/page/widget/button/button_page.dart';
import 'package:flutter_ui_demo/res/strings.dart';

import 'icons/icon_page.dart';

class WidgetPage extends StatefulWidget {
  WidgetPage({Key? key}) : super(key: key);

  @override
  _WidgetPageState createState() => _WidgetPageState();
}

class _WidgetPageState extends State<WidgetPage> {
  final widgetLists = [
    IconItem('Icons', Icons.access_alarm, page: IconPage()),
    IconItem('Button', Icons.access_alarm, page: ButtonPage()),
    IconItem('Text', Icons.access_alarm, page: ButtonPage()),
    IconItem('Form', Icons.access_alarm, page: ButtonPage()),
    IconItem('Layout', Icons.access_alarm, page: ButtonPage()),
    IconItem('Box', Icons.access_alarm, page: ButtonPage()),
    IconItem('Clip', Icons.access_alarm, page: ButtonPage()),
    IconItem('ScrollView', Icons.access_alarm, page: ButtonPage()),
    IconItem('Animated', Icons.access_alarm, page: ButtonPage()),
    IconItem('Dialog', Icons.access_alarm, page: ButtonPage()),
    IconItem('ListTitle', Icons.access_alarm, page: ButtonPage()),
    IconItem('Gesture', Icons.access_alarm, page: ButtonPage()),
    IconItem('Line', Icons.access_alarm, page: ButtonPage()),
    IconItem('Progress', Icons.access_alarm, page: ButtonPage()),
    IconItem('ClipRect', Icons.access_alarm, page: ButtonPage()),
    IconItem('Image', Icons.access_alarm, page: ButtonPage()),
    IconItem('Popupmenu', Icons.access_alarm, page: ButtonPage()),
    IconItem('Navigation', Icons.access_alarm, page: ButtonPage()),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppStrings.TAB_WIDGET),
        centerTitle: true,
        elevation: 0.5,
      ),
      body: GridView.builder(
        itemCount: widgetLists.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: 1.0,
          crossAxisSpacing: 0.5,
          mainAxisSpacing: 0.5,
        ),
        itemBuilder: (context, index) {
          return _buildItem(index);
        },
      ),
      backgroundColor: Colors.black12,
    );
  }

  /// 单个网格布局
  Widget _buildItem(int index) {
    var widgetItem = widgetLists[index];
    var icon = Icon(widgetItem.iconData, size: 30.0);
    var title = widgetItem.title;
    // 每个网格对应的跳转页面
    var page = widgetItem.page;
    return InkWell(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return page;
        }));
      },
      child: Container(
        padding: EdgeInsets.all(8.0),
        color: Colors.white,
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            icon,
            SizedBox(height: 10.0),
            Text(title),
          ],
        ),
      ),
    );
  }
}

class IconItem {
  final String title;
  final IconData iconData;
  final Widget page;

  IconItem(this.title, this.iconData, {required this.page});
}
